<template>
	<view class="box">
		<form @submit="formSubmit">
			<view class="box1">
				<span>头像</span>
				<view class="box1-item">
					<image src="../../static/person2.jpg" mode=""></image>
					<span style="	color: gainsboro;">></span>
				</view>
			</view>

			<view class="box2">
				<span>姓名</span>
				<view class="box1-item">
					<span><input type="text" :value="xi" @change="change1" /></span>
				</view>
			</view>


			<view class="box2">
				<span>手机号</span>
				<view class="box1-item">

					<span><input type="text" :value="shou" @change="change2" /></span>
				</view>
			</view>


			<view class="box2">
				<span>性别</span>
				<view class="box1-item">
					<span>
						<select-lay zindex="9999" :value="tval" name="name" :options="datalist"
							@selectitem="selectitem">
						</select-lay>
					</span>
				</view>
			</view>


			<view class="box2">
				<span>队伍</span>
				<view class="box1-item">
					<span @click="change">
						<uni-data-select v-model="value" :localdata="range" @change="change" :placeholder="qqq">
						</uni-data-select>
					</span>
				</view>
			</view>
			<button class="btn" form-type="submit">保存</button>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				qqq: "未加入队伍",
				range: [],
				xi: "",
				shou: '',
				//模拟数据列表
				datalist: [{
						label: "女",
						value: "value1"
					},
					{
						label: "男",
						value: "value2"
					}
				],
				//模拟初始数据
				tval: "",
			}
		},

		methods: {
			// formSubmit(e) {
			// 	console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			// },
			selectitem(index, item) {
				console.log(item)
				if (index >= 0) {
					this.tval = item.value;
				} else {
					this.tval = ""
				}
			},
			change(e) {
				console.log("e:", e);
				uni.navigateTo({
					url: './jia'
				})
			},
			change1(e) {
				console.log(e);
			},

			change2(e) {
				console.log(e);
			},
		}

	}
</script>
<style scoped lang="less">
	.box {
		margin: 30rpx;
	}

	.box1 {
		display: flex;
		line-height: 120rpx;
		height: 120rpx;
		border-bottom: gainsboro 2px solid;
		justify-content: space-between;
	}

	.box2 {
		display: flex;
		line-height: 80rpx;
		height: 80rpx;
		border-bottom: gainsboro 2px solid;
		justify-content: space-between;
	}

	.box1-item image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 10%;
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.box1-item {
		display: flex;
		justify-content: space-between;
	}

	.box1-item span {
		padding-right: 18rpx;
		font-size: 55rpx;

	}

	.box1-item span input {
		margin-top: 20rpx;
		padding-left: 15rpx;
		font-size: 25rpx;
		color: gray;
		border: 1px gray solid;
		width: 250rpx;
	}

	&/deep/.box1-item span select-lay .uni-select-lay-select {
		font-size: 25rpx;
		color: gray;
		height: 25px;
		border: 1px gray solid;
		margin-top: 20rpx;
		width: 270rpx !important;

	}

	&/deep/.uni-select {
		font-size: 25rpx;
		color: gray;
		height: 25px;
		border: 1px gray solid;
		margin-top: 20rpx;
		width: 270rpx !important;
	}

	.btn {
		margin-top: 50rpx;
		color: black;
		background-color: gainsboro;
		width: 50%;
		margin-left: 25%;
	}
</style>
